<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="category w">
    <!-- 1.面包屑 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ category.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 2.轮播图 -->
     <AppBanner :list="banner"></AppBanner>
     <!-- 3.分类展示 -->
      <div class="sub-list">
        <h3>全部分类</h3>
        <ul class="sub">
            <li v-for="item in category.subCateList" :key="item.id">
                <a href="#">
                    <img :src="item.bannerUrl" alt="">
                    <div class="name">{{ item.name }}</div>
                </a>
            </li>
        </ul>
      </div>
  </div>
</template>

<script>
import { getBanner } from '@/api';
import { computed, ref } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
export default {
    // eslint-disable-next-line no-unused-vars
    setup(props) {
        // 轮播图
        const banner = ref([]);
        getBanner().then(res=>{
            console.log(res);
            if(res.msg === '操作成功'){
                banner.value = res.result;
            }
        }).catch(err=>{
            console.log(err)
        })

        // 列表
        const store = useStore();
        console.log("cateList:" + store.state.category.cateList);
        const route = useRoute();
        // console.log(route.params.id)
        // 查找路由中 id 相等的分类
        const category = computed(() => {
            let cate = {};
            //find 找对象 findIndex 找下标
            const item = store.state.category.cateList.find(item => {
                // console.log("item:"+item)
                return item.id == route.params.id;
            });
            if(item) cate = item;
            return cate;
        })
        return { banner,category }
    }
};
</script>
<style scoped lang='less'>
.category {
    padding: 30px 10px;
    .breadcrumb {
        padding: 10px;

    }
    .sub-list {
        margin-top: 20px;
        h3 {
            font-size: 32px;
            text-align: center;
            font-weight: normal;
            line-height: 100px;
        }
        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            li {
                width: 140px;
                height: 160px;
                text-align: center;
                img {
                    width: 100px;
                    height: 100px;
                    margin: 5px 0;
                    ;
                }
                &:hover {
                    .name {
                        color: @xtxColor;
                    }
                }
            }
        }
    }
}
</style>